{{ define "validatorHistoryTable" }}
  {{ with .Data }}
    <div class="table-responsive px-0 py-0">
      <table style="margin-top: 0px !important;" class="table" id="validator-history-table" width="100%">
        <thead>
          <tr>
            <th rowspan="2">Epoch</th>
            <th colspan="2">Rewards</th>
            <th rowspan="2" data-toggle="tooltip" title="Events like attestations, sync duties, block proposals and withdrawals for a given epoch">Events</th>
          </tr>
          <tr style="display:none">
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>

    <script>
        var index = {{.Index}}
        window.addEventListener('load', function() {
            $('#validator-history-table').DataTable({
                searchDelay: 0,
                processing: true,
                details: false,
                serverSide: true,
                lengthChange: false,
                ordering: false,
                searching: false,
                stateSave: true,
                stateSaveCallback: function (settings, data) {
                  data.start = 0
                  localStorage.setItem("DataTables_" + settings.sInstance, JSON.stringify(data))
                },
                stateLoadCallback: function (settings) {
                  return JSON.parse(localStorage.getItem("DataTables_" + settings.sInstance))
                },
                ajax: dataTableLoader('/validator/' + index + '/history'),
                pagingType: 'input',
                pageLength: 10,
                language: {
                    searchPlaceholder: 'Search by Epoch Number',
                    search: '',
                    paginate: {
                        previous: '<i class="fas fa-chevron-left"></i>',
                        next: '<i class="fas fa-chevron-right"></i>'
                    }
                },
                columnDefs: [
                  {
                    targets: 1,
                    createdCell: function (td, cellData, rowData, row, col) {
                      $(td).css("width", "0px")
                    },
                  },
                  {
                    targets: 2,
                    createdCell: function (td, cellData, rowData, row, col) {
                      $(td).css("padding", "0px")
                    },
                  },
                ],
                drawCallback: function(settings) {
                    formatTimestamps()
                },
            })
            $('#validator-history-table_wrapper > div:nth-child(3) > div:nth-child(1)').removeClass('col-md-5').removeClass('col-sm-12')
            $('#validator-history-table_wrapper > div:nth-child(3) > div:nth-child(2)').removeClass('col-md-7').removeClass('col-sm-12')
            $('#validator-history-table_wrapper > div:nth-child(3)').addClass('justify-content-center')
            $("#validator-history-table_paginate").attr('style', 'padding-right: 0 !important')
            $("#validator-history-table_info").attr('style', 'padding-top: 0 !important;')
        })
    </script>
  {{ end }}
{{ end }}
